<template>
    <div class="search">
        <header-tm></header-tm>
        <form action="/">
  <van-search
    v-model="value"
    show-action
    placeholder="商品搜索"
    @cancel="onCancel"
    @input="onInput"
  />
</form>
<p v-if="show" class="wu">数据库暂无此类商品...</p>
<ul class="search-list" v-if="value">
    <li class="item" v-for="item in searchList" :key="item.id">{{item.name}}</li>
</ul>
<div class="history" v-if="locaList && value ==''">
    <div class="title">
        <div class="text">历史记录</div>
        <div class="del">
            <img src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/del1-93f0a4add4.png" @click="clearLoca" >
        </div>
    </div>
    <div class="his-list">
    <div class="record" v-for="(item,index) in locaList" :key="index">{{item}}</div>
    </div>
</div>
<div class="hot" v-if="value == ''">
    <p class="title">热门搜索</p>
    <div class="hot-list">
        <div class="reco" :class="item.is_hot == 1 ? 'active' : ''" v-for="(item,index) in hotList" :key="index" @click="addLoca(item.keyword)">
        {{item.keyword}}
    </div>
    </div>
</div>

    </div>
</template>
<script>
import Hear from '../components/Header'
import Header from '../components/Header.vue'
import { helperaction,indexaction,clearhistory,addhistory } from '../../../api/search/index'
export default {
    data() {
        return {
            value:'',
            searchList:[],
            show:false,
            hotList:[],
            locaList:[]
        }
    },
    watch: {
        value() {
            if (this.value == "") {
                this.show = false
            }
        }
    },
    computed: {
    },
    methods: {
        clearLoca() {
            clearhistory({openId:"oQmbb4sNZdxaUQZ0sfYgvtOP2S7c"}).then(res=>{
                console.log(res);
            })
            localStorage.clear()
            this.locaList = JSON.parse(localStorage.getItem('locaList'))
            this.locaList = []
        },
        addLoca(item) {
            var bol = this.locaList.every(el => el != item)
            if (bol) {
                // this.locaList = JSON.parse(localStorage.getItem('locaList'))
                this.locaList.push(item)
                localStorage.setItem('locaList',JSON.stringify(this.locaList))
            }
            
        },
        init() {
            var _this = this
            helperaction({keyword:_this.value,order:'desc'}).then(res=>{
                if (_this.value !=="") {
                    if (res.keywords == false) {
                    _this.show = true
                    return
                }
                }
                
                _this.searchList = res.keywords
                console.log(res);
            })

            addhistory({keyword:'皮鞋',openId:"oQmbb4sNZdxaUQZ0sfYgvtOP2S7c"}).then(res=>{
                console.log("000");
                console.log(res);
            })
        },
        key() {
            indexaction({openId:'oQmbb4sNZdxaUQZ0sfYgvtOP2S7c'}).then(res=>{
                this.hotList = res.hotKeywordList
                console.log(res);
            })
        },
        onCancel() {
            this.$router.push('/')
        },
        onInput() {
            this.init()
        },
        ben() {

            this.locaList = JSON.parse(localStorage.getItem('locaList'))
            // console.log(this.locaList);
            if (this.locaList == null) {
                // console.log(888);
                this.locaList = []
            }
        }
    },
    mounted() {
        this.key() 
        this.ben()           
    },
    components: {
        "header-tm":Hear
    }
}
</script>
<style lang="scss" scoped>
.search {
    height: 100vh;
    background-color: #fff;
}
.search-list {
    .item {
        padding: 10px;
        text-align: left;
    }
}
.wu {
    margin-top: 150px;
}
// 历史记录
.history {
    background-color: #fff;
    padding: 16px;
    .title {
        overflow: hidden;
        margin-bottom: 15px;
        text-align: left;
        height: 27.5px;
        .text {
            float: left;
            line-height: 27.5px;
        }
        .del {
            float: right;
            img {
                width: 27.5px;
                height: 27.5px;
            }
        }
    }
    .his-list {
        overflow: hidden;
        .record {
        float: left;
        margin: 0 15px 10px 0;
        padding: 5px;
        border: 1px solid #333;
        &.active {
        color: red;
        border-color: red;
    }
    }
    }
    
}
// 热门搜索
.hot {
    background-color: #fff;
    padding: 16px;
    margin-top: 10px;
    .title {
        margin-bottom: 15px;
        text-align: left;
    }
    .hot-list {
        // width: 345px;
        overflow: hidden;
        .reco {
        float: left;
        margin: 0 15px 10px 0;
        padding: 5px;
        border: 1px solid #333;
        &.active {
        color: red;
        border-color: red;
    }
    }
    }
    
}
</style>